<!--机种管理-->
<template>
  <div class="g-page-container">
    <PageHeader title="机种信息" />
    <div class="g-content-container">
      <p-row type="flex" class="form-container" justify="space-around">
        <p-col :span="5" class="condition-row">
          <p-input
            v-model="form.modelNumber"
            class="condition-input"
            placeholder="请输入"
          />
          <span class="condition-text">机种编号</span>
        </p-col>
        <p-col :span="5" class="condition-row">
          <p-input
            v-model="form.modelName"
            class="condition-input"
            placeholder="请输入"
          />
          <span class="condition-text">机种名称</span>
        </p-col>
        <p-col :span="4" class="condition-row">
          <span>是否为临时机种</span>
          <p-select v-model="form.provisional" class="commonselect">
            <p-select-option value="">全部</p-select-option>
            <p-select-option
              v-for="(item, i) in provisionalInfo"
              :key="i"
              :value="item.value"
            >
              {{ item.label }}
            </p-select-option>
          </p-select>
        </p-col>
        <p-col :span="4" class="condition-row">
          <span>销售组织</span>
          <p-select v-model="form.salesOrganization" class="commonselect">
            <p-select-option value="">全部</p-select-option>
            <p-select-option
              v-for="(item, i) in OrganizationInfo"
              :key="i"
              :value="item.code"
            >
              {{ item.name }}
            </p-select-option>
          </p-select>
        </p-col>
        <p-col :span="4" class="condition-row">
          <p-button
            style="margin-right: 5px"
            class="commonbutton"
            type="primary"
            @click="search"
          >
            搜索
          </p-button>
          <p-button class="commonbutton" @click="reset">重置</p-button>
        </p-col>
      </p-row>
      <p-button class="mt-10 commonbutton" type="primary" @click="addModel">
        <p-icon type="plus" />新增
      </p-button>
      <p-button class="ml-10 mt-10 commonbutton" @click="delect">
        <p-icon type="delete" />删除
      </p-button>
      <p-button class="ml-10 mt-10 commonbutton" @click="exportExcel">
        导出
      </p-button>
      <p-table
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChanges,
        }"
        :loading="loading"
        :data-source="data"
        :row-key="(records, index) => index"
        :columns="columns"
        bordered
        :scroll="{ x: 'calc(1200px + 90%)', y: 'calc(100vh - 400px)' }"
        height:500px
        :row-class-name="isRedRow"
        :pagination="pagination"
        class="mt-10"
        @change="change"
      />
    </div>
    <p-drawer
      placement="right"
      width="calc(100vw - 200px)"
      :visible="visible"
      :closable="false"
      :destroy-on-close="true"
      @click="onclose"
    >
      <TaskTitle
        :title-name="loadtitle"
        :icon-name="loadicontitle"
        :color="loadcolor"
      />
      <div class="g-drawer-list-container">
        <div style="position: relative">
          <TitleSecondary title="基本信息" style="margin-top: 15px" />
          <p-button
            v-show="selectmodelNumber"
            class="commonbutton edit"
            type="primary"
            @click="edit"
          >
            编辑
          </p-button>
        </div>
        <p-form-model
          v-if="showForm"
          ref="ruleForm"
          :model="modelForm"
          :rules="rulesComputed"
          layout="inline"
        >
          <p-row type="flex" justify="space-around">
            <p-col :span="10" class="condition-row">
              <p-form-model-item label="机种编号">
                <p-input
                  v-model="modelForm.modelNumber"
                  class="from-input"
                  disabled
                />
              </p-form-model-item>
            </p-col>
            <p-col :span="10" class="condition-row">
              <p-tooltip placement="top" :title="modelForm.modelName">
                <p-form-model-item label="机种名称">
                  <!-- <p-input
                    v-model="modelForm.modelName"
                    class="from-input"
                    disabled
                  /> -->
                  <div class="from-input model-div">
                    {{ modelForm.modelName }}
                  </div>
                </p-form-model-item>
              </p-tooltip>
            </p-col>
          </p-row>
          <p-row
            type="flex"
            class="condition"
            justify="space-around"
            style="margin-top: 10px"
          >
            <p-col :span="10" class="condition-row">
              <p-form-model-item label="是否临时机种" prop="provisional">
                <p-select
                  v-model="modelForm.provisional"
                  placeholder="请选择"
                  class="from-input"
                  :disabled="isDisabledProvisional"
                  @change="selectProvisional"
                >
                  <p-select-option
                    v-for="(item, i) in provisionalInfo"
                    :key="i"
                    :value="item.value"
                  >
                    {{ item.label }}
                  </p-select-option>
                </p-select>
              </p-form-model-item>
            </p-col>
            <p-col :span="10" class="condition-row">
              <p-form-model-item label="销售组织" prop="salesOrganization">
                <p-select
                  v-model="modelForm.salesOrganization"
                  placeholder="请选择"
                  class="from-input"
                  :disabled="isDisabledSalesOrganization"
                >
                  <p-select-option
                    v-for="(item, i) in OrganizationInfo"
                    :key="i"
                    :value="item.code"
                  >
                    {{ item.name }}
                  </p-select-option>
                </p-select>
              </p-form-model-item>
            </p-col>
          </p-row>
          <p-row
            type="flex"
            class="condition"
            justify="space-around"
            style="margin-top: 10px"
          >
            <p-col :span="10" class="condition-row">
              <p-form-model-item label="尺寸" prop="size">
                <p-input
                  v-model="modelForm.size"
                  placeholder="请输入"
                  class="from-input"
                  :disabled="isDisabled"
                />
              </p-form-model-item>
            </p-col>
            <p-col :span="10" class="condition-row">
              <p-form-model-item label="分辨率" prop="resolution">
                <p-input
                  v-model="modelForm.resolution"
                  placeholder="请输入"
                  class="from-input"
                  :disabled="isDisabled"
                />
              </p-form-model-item>
            </p-col>
          </p-row>
          <p-row
            type="flex"
            class="condition"
            justify="space-around"
            style="margin-top: 10px"
          >
            <p-col :span="10" class="condition-row">
              <p-form-model-item label="分辨率2" prop="resolutionTwo">
                <p-input
                  v-model="modelForm.resolutionTwo"
                  placeholder="请输入"
                  class="from-input"
                  :disabled="isDisabled"
                />
              </p-form-model-item>
            </p-col>
            <p-col :span="10" class="condition-row">
              <p-form-model-item label="技术别" prop="technology">
                <p-input
                  v-model="modelForm.technology"
                  placeholder="请输入"
                  class="from-input"
                  :disabled="isDisabled"
                />
              </p-form-model-item>
            </p-col>
          </p-row>
          <p-row
            type="flex"
            class="condition"
            justify="space-around"
            style="margin-top: 10px"
          >
            <p-col :span="10" class="condition-row">
              <p-form-model-item label="Bonding方式" prop="bonding">
                <p-input
                  v-model="modelForm.bonding"
                  placeholder="请输入"
                  class="from-input"
                  :disabled="isDisabled"
                />
              </p-form-model-item>
            </p-col>
            <p-col :span="10" class="condition-row">
              <p-form-model-item label="Notch区形状" prop="notch">
                <p-input
                  v-model="modelForm.notch"
                  placeholder="请输入"
                  class="from-input"
                  :disabled="isDisabled"
                />
              </p-form-model-item>
            </p-col>
          </p-row>
          <p-row
            type="flex"
            class="condition"
            justify="space-around"
            style="margin-top: 10px"
          >
            <p-col :span="10" class="condition-row">
              <p-form-model-item label="刷新率" prop="refreshRate">
                <p-input
                  v-model="modelForm.refreshRate"
                  placeholder="请输入"
                  class="from-input"
                  :disabled="isDisabled"
                />
              </p-form-model-item>
            </p-col>
            <p-col :span="10" class="condition-row">
              <p-form-model-item label="亮度" prop="lightness">
                <p-input
                  v-model="modelForm.lightness"
                  placeholder="请输入"
                  class="from-input"
                  :disabled="isDisabled"
                />
              </p-form-model-item>
            </p-col>
          </p-row>
          <p-row
            type="flex"
            class="condition"
            justify="space-around"
            style="margin-top: 10px"
          >
            <p-col :span="10" class="condition-row">
              <p-form-model-item label="项目号" prop="projectNumber">
                <p-input
                  v-model="modelForm.projectNumber"
                  placeholder="请输入"
                  class="from-input"
                  :disabled="isDisabledSalesOrganization"
                />
              </p-form-model-item>
            </p-col>
            <p-col :span="10" class="condition-row">
              <p-form-model-item label="模切比" prop="modelCutRate">
                <p-input
                  v-model="modelForm.modelCutRate"
                  placeholder="请输入"
                  class="from-input"
                  :disabled="isDisabledSalesOrganization"
                />
              </p-form-model-item>
            </p-col>
          </p-row>
          <p-row
            type="flex"
            class="condition"
            justify="space-around"
            style="margin-top: 10px; height: 70px"
          >
            <p-col :span="22" class="condition-row">
              <p-form-model-item label="备注" prop="remark">
                <p-textarea
                  v-model="modelForm.remark"
                  style="height: 70px; width: 55vw; resize: none"
                  :disabled="isDisabledSalesOrganization"
                />
              </p-form-model-item>
            </p-col>
          </p-row>
          <p-row
            v-if="selectmodelNumber"
            type="flex"
            class="condition"
            justify="space-around"
            style="margin-top: 10px"
          >
            <p-col :span="10" class="condition-row">
              <p-form-model-item label="最后更新人">
                <p-input
                  v-model="modelForm.updateUserName"
                  class="from-input"
                  disabled
                />
                <p-icon slot="prefix" type="user" />
              </p-form-model-item>
            </p-col>
            <p-col :span="10" class="condition-row">
              <p-form-model-item label="最后更新时间">
                <p-input
                  v-model="modelForm.updateTime"
                  class="from-input"
                  disabled
                />
              </p-form-model-item>
            </p-col>
          </p-row>
          <p-row
            type="flex"
            class="condition"
            justify="space-around"
            style="margin-top: 10px"
          >
            <p-col :span="10" class="condition-row">
              <p-form-model-item label="创建人">
                <p-input
                  v-model="modelForm.createUserName"
                  class="from-input"
                  disabled
                />
              </p-form-model-item>
            </p-col>
            <p-col :span="10" class="condition-row">
              <p-form-model-item label="创建时间">
                <p-input
                  v-model="modelForm.createTime"
                  class="from-input"
                  disabled
                />
              </p-form-model-item>
            </p-col>
          </p-row>
        </p-form-model>
      </div>
      <div class="g-drawer-footer">
        <p-button
          v-show="isEdit"
          style="margin-right: 10px"
          class="commonbutton"
          type="primary"
          @click="preserve"
        >
          保存
        </p-button>
        <p-button class="commonbutton" @click="back">返回</p-button>
      </div>
    </p-drawer>
  </div>
</template>

<script>
import {
  postAddModel,
  postModelList,
  getDelModel,
  getModel,
  postUpdateModel,
  postDelModels,
  getDictType,
  postExportList,
} from '@/api/modelInformation.js';
import { postOrganizationInfo } from '@/api/public.js';
import { formatDate, downloadFile } from '@/utils/index.js';
export default {
  components: {},
  data() {
    return {
      rules: {
        provisional: [
          { required: true, message: '请选择是否临时机种', trigger: 'blur' },
        ],
        salesOrganization: [
          { required: true, message: '请选择销售组织', trigger: 'blur' },
        ],
        size: [
          { required: true, message: '请输入尺寸', trigger: 'blur' },
          {
            min: 0,
            max: 20,
            message: '输入的内容不能超过20个',
            trigger: 'blur',
          },
          { pattern: /^[^\s]*$/, message: '禁止输入空格' },
        ],
        resolution: [
          { required: true, message: '请输入分辨率', trigger: 'blur' },
          { max: 20, message: '输入的内容不能超过20个', trigger: 'blur' },
          { pattern: /^[^\s]*$/, message: '禁止输入空格' },
        ],
        resolutionTwo: [
          { required: true, message: '请输入分辨率2', trigger: 'blur' },
          { max: 20, message: '输入的内容不能超过20个', trigger: 'blur' },
          { pattern: /^[^\s]*$/, message: '禁止输入空格' },
        ],
        technology: [
          { required: true, message: '请输入技术别', trigger: 'blur' },
          { max: 20, message: '输入的内容不能超过20个', trigger: 'blur' },
          { pattern: /^[^\s]*$/, message: '禁止输入空格' },
        ],
        bonding: [
          { required: true, message: '请输入Bonding', trigger: 'blur' },
          { max: 20, message: '输入的内容不能超过20个', trigger: 'blur' },
          { pattern: /^[^\s]*$/, message: '禁止输入空格' },
        ],
        notch: [
          { required: true, message: '请输入Notch区形状', trigger: 'blur' },
          { max: 20, message: '输入的内容不能超过20个', trigger: 'blur' },
          { pattern: /^[^\s]*$/, message: '禁止输入空格' },
        ],
        refreshRate: [
          { required: true, message: '请输入刷新率', trigger: 'blur' },
          { max: 20, message: '输入的内容不能超过20个', trigger: 'blur' },
          { pattern: /^[^\s]*$/, message: '禁止输入空格' },
        ],
        lightness: [
          { required: true, message: '请输入亮度', trigger: 'blur' },
          { max: 20, message: '输入的内容不能超过20个', trigger: 'blur' },
          { pattern: /^[^\s]*$/, message: '禁止输入空格' },
        ],
        modelCutRate: [
          // { required: false, validator: checkmodelCutRate, trigger: 'blur' },
          { pattern: /^[^\s]*$/, message: '禁止输入空格' },
          { max: 20, message: '输入的内容不能超过20个', trigger: 'blur' },
          { pattern: /^\+?[1-9][0-9]*$/, message: '请输入大于0的整数' },
        ],
        projectNumber: [
          { pattern: /^[^\s]*$/, message: '禁止输入空格' },
          { max: 20, message: '输入的内容不能超过20个', trigger: 'blur' },
        ],
        remark: [{ max: 255, message: '输入的内容过长', trigger: 'blur' }],
      },
      resrules: {
        provisional: [
          { required: true, message: '请选择是否临时机种', trigger: 'blur' },
        ],
        salesOrganization: [
          { required: true, message: '请选择销售组织', trigger: 'blur' },
        ],

        modelCutRate: [
          // { required: false, validator: checkmodelCutRate, trigger: 'blur' },
          { pattern: /^[^\s]*$/, message: '禁止输入空格' },
          { max: 20, message: '输入的内容不能超过20个', trigger: 'blur' },
          { pattern: /^\+?[1-9][0-9]*$/, message: '请输入大于0的整数' },
        ],
        projectNumber: [
          { pattern: /^[^\s]*$/, message: '禁止输入空格' },
          { max: 20, message: '输入的内容不能超过20个', trigger: 'blur' },
        ],
        remark: [{ max: 255, message: '输入的内容过长', trigger: 'blur' }],
      },
      loadicontitle: '',
      loadcolor: '',
      loading: false,
      loadtitle: '',
      visible: false,
      asc: true,
      isDisabledProvisional: false,
      isDisabledSalesOrganization: false,
      provisionalInfo: [],
      preserveState: 1,
      pagination: {
        pageSize: 10,
        current: 1,
        defaultPageSize: 10,
        pageSizeOptions: ['10', '20', '50', '100'],
        showLessItems: true,
        total: 0,
        showSizeChanger: true,
        showTotal: total => {
          return `总计${total}条`;
        },
      },
      isDisabled: false,
      selectmodelNumber: '', //table中点击的机种编号
      isEdit: true,
      form: {
        modelNumber: '',
        modelName: '',
        provisional: '',
        salesOrganization: '',
        current: 1,
        pageSize: 10,
      }, //搜索表单输入框跟选择框的值
      modelForm: {
        //新增机种的form表单的值
        modelNumber: '',
        modelName: '',
        provisional: '',
        salesOrganization: '',
        size: '',
        resolution: '',
        resolutionTwo: '',
        technology: '',
        bonding: '',
        notch: '',
        refreshRate: '',
        lightness: '',
        projectNumber: '',
        modelCutRate: '',
        remark: '',
      },
      resmodelForm: {
        //新增机种的form表单的值
        modelNumber: '',
        modelName: '',
        provisional: '',
        salesOrganization: '',
        size: '',
        resolution: '',
        resolutionTwo: '',
        technology: '',
        bonding: '',
        notch: '',
        refreshRate: '',
        lightness: '',
        projectNumber: '',
        modelCutRate: '',
        remark: '',
      },
      writeMessageShow: false, //机种信息展示的显示或隐藏
      selectedRowKeys: [],
      data: [],
      isChange: false,
      changeCount: 0,
      OrganizationInfo: [],
      showForm: true,
      rulesComputed: {
        provisional: [
          { required: true, message: '请选择是否临时机种', trigger: 'blur' },
          { pattern: /^[^\s]*$/, message: '禁止输入空格' },
        ],
        salesOrganization: [
          { required: true, message: '请选择销售组织', trigger: 'blur' },
          { pattern: /^[^\s]*$/, message: '禁止输入空格' },
        ],
        size: [
          { required: true, message: '请输入尺寸', trigger: 'blur' },
          { pattern: /^[^\s]*$/, message: '禁止输入空格' },
          { max: 20, message: '输入的内容不能超过20个', trigger: 'blur' },
        ],
        resolution: [
          { required: true, message: '请输入分辨率', trigger: 'blur' },
          { pattern: /^[^\s]*$/, message: '禁止输入空格' },
          { max: 20, message: '输入的内容不能超过20个', trigger: 'blur' },
        ],
        resolutionTwo: [
          { required: true, message: '请输入分辨率2', trigger: 'blur' },
          { pattern: /^[^\s]*$/, message: '禁止输入空格' },
          { max: 20, message: '输入的内容不能超过20个', trigger: 'blur' },
        ],
        technology: [
          { required: true, message: '请输入技术别', trigger: 'blur' },
          { pattern: /^[^\s]*$/, message: '禁止输入空格' },
          { max: 20, message: '输入的内容不能超过20个', trigger: 'blur' },
        ],
        bonding: [
          { required: true, message: '请输入Bonding', trigger: 'blur' },
          { pattern: /^[^\s]*$/, message: '禁止输入空格' },
          { max: 20, message: '输入的内容不能超过20个', trigger: 'blur' },
        ],
        notch: [
          { required: true, message: '请输入Notch区形状', trigger: 'blur' },
          { pattern: /^[^\s]*$/, message: '禁止输入空格' },
          { max: 20, message: '输入的内容不能超过20个', trigger: 'blur' },
        ],
        refreshRate: [
          { required: true, message: '请输入刷新率', trigger: 'blur' },
          { pattern: /^[^\s]*$/, message: '禁止输入空格' },
          { max: 20, message: '输入的内容不能超过20个', trigger: 'blur' },
        ],
        lightness: [
          { required: true, message: '请输入亮度', trigger: 'blur' },
          { pattern: /^[^\s]*$/, message: '禁止输入空格' },
          { max: 20, message: '输入的内容不能超过20个', trigger: 'blur' },
        ],
        modelCutRate: [
          // { required: false, validator: checkmodelCutRate, trigger: 'blur' },
          { pattern: /^[^\s]*$/, message: '禁止输入空格' },
          { pattern: /^\+?[1-9][0-9]*$/, message: '请输入大于0的整数' },
          { max: 20, message: '输入的内容不能超过20个', trigger: 'blur' },
        ],
        remark: [{ max: 255, message: '输入的内容过长', trigger: 'blur' }],
        projectNumber: [
          { pattern: /^[^\s]*$/, message: '禁止输入空格' },
          { max: 20, message: '输入的内容不能超过20个', trigger: 'blur' },
        ],
      },
    };
  },

  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    },
    columns() {
      const columns = [
        {
          align: 'center',
          title: '序号',
          dataIndex: 'Id',
          key: 'Id',
          width: 60,
          customRender: (text, record, index) => `${index + 1}`,
        },
        {
          align: 'center',
          title: '机种编号',
          dataIndex: 'modelNumber',
          key: 'modelNumber',
          ellipsis: true,
          sorter: true,
          customRender: text => {
            const child = this.$createElement('a', {
              class: {
                blueColor: true,
              },
              domProps: {
                innerHTML: text,
              },
              on: {
                click: () => this.handleNumberClick(text),
              },
            });
            const obj = {
              children: child,
              attrs: {},
            };
            return obj;
          },
        },
        {
          align: 'center',
          title: '机种名称',
          dataIndex: 'modelName',
          key: 'modelName',
          sorter: true,
          ellipsis: true,
        },
        {
          align: 'center',
          title: '是否为临时机种',
          dataIndex: 'provisional',
          key: 'provisional',
          sorter: true,
          ellipsis: true,
          width: 130,
        },
        {
          align: 'center',
          title: '销售组织',
          dataIndex: 'salesOrganization',
          key: 'salesOrganization',
          sorter: true,
          ellipsis: true,
          customRender: text => this.orgOptions[text],
        },
        {
          align: 'center',
          title: '尺寸',
          dataIndex: 'size',
          key: 'size',
          sorter: true,
          ellipsis: true,
        },
        {
          align: 'center',
          title: '分辨率',
          dataIndex: 'resolution',
          key: 'resolution',
          sorter: true,
          ellipsis: true,
        },
        {
          align: 'center',
          title: '分辨率2',
          dataIndex: 'resolutionTwo',
          key: 'resolutionTwo',
          sorter: true,
          ellipsis: true,
        },
        {
          align: 'center',
          title: '技术别',
          dataIndex: 'technology',
          key: 'technology',
          sorter: true,
          ellipsis: true,
        },
        {
          align: 'center',
          title: 'Bonding方式',
          dataIndex: 'bonding',
          key: 'bonding',
          sorter: true,
          ellipsis: true,
        },
        {
          align: 'center',
          title: 'Notch区形状',
          dataIndex: 'notch',
          key: 'notch',
          sorter: true,
          ellipsis: true,
        },
        {
          align: 'center',
          title: '刷新率',
          dataIndex: 'refreshRate',
          key: 'refreshRate',
          sorter: true,
          ellipsis: true,
        },
        {
          align: 'center',
          title: '亮度',
          dataIndex: 'lightness',
          key: 'lightness',
          sorter: true,
          ellipsis: true,
        },
        {
          align: 'center',
          title: '项目号',
          dataIndex: 'projectNumber',
          key: 'projectNumber',
          sorter: true,
          ellipsis: true,
        },
        {
          align: 'center',
          title: '模切比',
          dataIndex: 'modelCutRate',
          key: 'modelCutRate',
          sorter: true,
          ellipsis: true,
        },
        {
          align: 'center',
          title: '备注',
          dataIndex: 'remark',
          key: 'remark',
          sorter: true,
          ellipsis: true,
        },

        {
          align: 'center',
          title: '创建人',
          dataIndex: 'createUserName',
          key: 'createUserName',
          sorter: true,
          ellipsis: true,
        },
        {
          align: 'center',
          title: '最后更新人',
          dataIndex: 'updateUserName',
          key: 'updateUserName',
          sorter: true,
          ellipsis: true,
        },
        {
          align: 'center',
          title: '创建时间',
          dataIndex: 'createTime',
          key: 'createTime',
          sorter: true,
          ellipsis: true,
        },
        {
          align: 'center',
          title: '最后更新时间',
          dataIndex: 'updateTime',
          key: 'updateTime',
          sorter: true,
          ellipsis: true,
        },
      ];
      return columns;
    },
  },
  watch: {
    'modelForm.provisional': {
      handler(val, oldVal) {
        if (val !== oldVal) {
          this.modelForm.provisional === '1'
            ? (this.rulesComputed = this.resrules)
            : (this.rulesComputed = this.rules);
          this.showForm = false;
          this.$nextTick(() => {
            this.showForm = true;
          });
        }
      },
    },
    modelForm: {
      handler() {
        this.changeCount++;
        if (this.changeCount === 1) {
          this.isChange = false;
        } else {
          this.isChange = true;
        }
      },
      deep: true,
    },
  },

  async created() {
    this.orgOptions = await this.postOrganizationInfo();
    this.loadModelList(this.form);
    this.loadProvisional();
  },

  beforeRouteEnter(to, from, next) {
    next(vm => {
      console.log('vm: ', vm);
      if (to.query?.id) {
        vm.handleNumberClick(to.query.id);
      }
    });
  },

  methods: {
    async handleNumberClick(text) {
      this.selectmodelNumber = false;
      this.loadtitle = '机种信息详情';
      this.loadicontitle = 'Det';
      this.loadcolor = 'green';
      this.changeCount = 0;
      this.isEdit = false;
      this.selectmodelNumber = text;
      this.isDisabled = true;
      this.isDisabledSalesOrganization = true;
      this.isDisabledProvisional = true;
      this.visible = true;
      let res = await getModel(text);
      res.data.data.updateTime = formatDate(res.data.data.updateTime);
      res.data.data.createTime = formatDate(res.data.data.createTime);
      this.modelForm = res.data.data;
      this.reqModelForm = res.data.data;
      // this.$router.push({ path:'/modelinformation', query: { modelNumber: text  }})
    },
    selectProvisional(value) {
      //选择是否临时机种
      if (value === '1') {
        this.isDisabled = true;
        this.isDisabledSalesOrganization = false;
        this.modelForm.modelName = 'TBD';
        this.modelForm.size = '';
        this.modelForm.resolution = '';
        this.modelForm.resolutionTwo = '';
        this.modelForm.technology = '';
        this.modelForm.bonding = '';
        this.modelForm.notch = '';
        this.modelForm.refreshRate = '';
        this.modelForm.lightness = '';

        // console.log(this.rules);
        // console.log(this.resrules);
      } else {
        this.isDisabled = false;
        this.isDisabledSalesOrganization = false;
        this.modelForm.modelName = '';
      }
    },
    async postOrganizationInfo() {
      const result = await postOrganizationInfo({
        code: 'ltcsmsizebu',
      });
      this.OrganizationInfo = result?.data?.data || [];
      const data = result?.data?.data || [];
      return data.reduce((pre, cur) => {
        pre[cur.code] = cur.name;
        return pre;
      }, {});
    },
    async loadProvisional() {
      const res = await getDictType('model_info_provisional');
      this.provisionalInfo = res.data.data.dictDataList;
    },
    async loadModelList(form) {
      this.loading = true;
      let res = await postModelList(form).finally(() => (this.loading = false));
      res.data.data.records.forEach(item => {
        // if (item.salesOrganization === 'ltcltps') {
        //   item.salesOrganization = 'LTPS';
        // } else if (item.salesOrganization === 'ltcoled') {
        //   item.salesOrganization = 'OLED';
        // }
        if (item.provisional === '0') {
          item.provisional = '否';
        } else {
          item.provisional = '是';
        }
      });
      this.data = res?.data?.data?.records;
      this.pagination.total = res.data.data.total;
    },
    change(pagination, filters, sorter) {
      this.selectedRowKeys = [];
      this.form.current = pagination.current;
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      if (sorter.order === 'ascend') {
        this.asc = true;
      } else {
        this.asc = false;
      }
      console.log(this.modelForm.modelNumber);
      this.loadModelList({
        current: pagination.current,
        pageSize: pagination.pageSize,
        column: sorter.columnKey,
        asc: this.asc,
        modelNumber: this.form.modelNumber,
        modelName: this.form.modelName,
        provisional: this.form.provisional,
        salesOrganization: this.form.salesOrganization,
      });
    },
    async exportExcel() {
      const res = await postExportList(this.form);
      await downloadFile(res.data, '机种信息.xlsx');
    },
    async search() {
      //搜索
      this.form.current = 1;
      this.form.pageSize = 10;
      let res = await postModelList(this.form);
      if (res.data.code === 400) {
        this.data = [];
        this.pagination.total = 0;
      } else {
        res.data.data.records.forEach(item => {
          if (item.provisional === '0') {
            item.provisional = '否';
          } else {
            item.provisional = '是';
          }
        });
        this.pagination.current = 1;
        this.pagination.pageSize = 10;
        this.data = res.data.data.records;
        this.pagination.total = res.data.data.total;
      }
    },
    addModel() {
      //增加机种
      this.modelForm = {
        modelNumber: '',
        modelName: '',
        provisional: '',
        salesOrganization: '',
        size: '',
        resolution: '',
        resolutionTwo: '',
        technology: '',
        bonding: '',
        notch: '',
        refreshRate: '',
        lightness: '',
        projectNumber: '',
        modelCutRate: '',
        remark: '',
        createUserName: `${this.$store.state.user.name}`,
      };
      this.loadtitle = '新增机种';
      this.loadicontitle = 'New';
      this.loadcolor = 'red';
      this.changeCount = 0;
      this.visible = true;
      this.visible = true;
      this.selectmodelNumber = '';
      this.isEdit = true;
      this.isDisabled = false;
      this.isDisabledSalesOrganization = false;
      this.isDisabledProvisional = false;
      this.preserveState = 1;
    },
    edit() {
      //编辑按钮.
      this.loadtitle = '编辑机种信息';
      this.loadicontitle = 'Edit';
      this.loadcolor = 'blue';
      this.selectmodelNumber = false;
      this.preserveState = 2;
      this.isEdit = true;
      this.isDisabledSalesOrganization = false;
      if (this.modelForm.provisional === '0') {
        this.isDisabledProvisional = true;
        this.isDisabled = false;
      } else {
        this.isDisabledProvisional = false;
        this.isDisabled = true;
      }
    },
    reset() {
      //重置input,select框
      this.form = {
        modelNumber: '',
        modelName: '',
        provisional: '',
        salesOrganization: '',
        current: 1,
        pageSize: 10,
      };
      this.loadModelList({
        current: 1,
        pageSize: 10,
      });
      this.pagination.current = 1;
      this.pagination.pageSize = 10;
    },
    async postAddModel() {
      //新增机种请求方法
      console.log(this.preserveState);
      if (this.preserveState === 1) {
        let res = await postAddModel(this.modelForm);
        if (res.data.code === 0) {
          this.$message.success('新增机种成功');
          this.loadModelList({
            current: 1,
            pageSize: 10,
          });
          this.isEdit = true;
          this.visible = false;
          this.preserveState = 1;
        } else if (res.data.code === 500) {
          this.$message.error(res.data.msg);
        } else {
          this.$message.error('新增机种失败');
          this.isEdit = true;
          this.visible = false;
          this.preserveState = 1;
        }
      } else {
        delete this.modelForm.updateTime;
        delete this.modelForm.updateUserId;
        let res = await postUpdateModel(this.modelForm);
        if (res.data.code === 0) {
          this.isEdit = false;
          this.visible = false;
          this.$message.success('修改成功');
          this.loadModelList({
            current: 1,
            pageSize: 10,
          });
        } else if (res.data.code === 500) {
          this.$message.error(res.data.msg);
        } else {
          this.$message.error('修改失败');
        }
      }
    },
    async preserve() {
      //保存机种信息配置
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.postAddModel();
        } else {
          return false;
        }
      });
      // }
      // }
    },
    async back() {
      //返回
      if (this.preserveState === 1) {
        if (!this.isChange) {
          setTimeout(() => (this.isEdit = true), 500);
          this.visible = false;
        } else {
          this.$confirm('返回将不保存修改数据，请确认是否返回？')
            .then(() => {
              setTimeout(() => (this.isEdit = true), 500);
              this.visible = false;
            })
            .catch(() => {});
        }
      } else {
        if (this.isChange === false) {
          setTimeout(() => (this.isEdit = true), 500);
          this.visible = false;
        } else {
          this.$confirm('返回将不保存修改数据，请确认是否返回？')
            .then(() => {
              setTimeout(() => (this.isEdit = true), 500);
              this.visible = false;
            })
            .catch(() => {
              // console.log('e: ', e);
            });
        }
      }
    },
    handleChange(pagination, filters, sorter) {
      this.sortedInfo = sorter;
    },
    delect() {
      //删除table选中的机种
      if (this.selectedRowKeys.length === 0) {
        this.$message.error('请勾选要删除的机种');
      }
      if (this.selectedRowKeys.length === 1) {
        this.$confirm(
          `该操作将删除 ${this.selectedRowKeys.length} 条数据，是否确认？`
        )
          .then(() => {
            this.getDelectModel();
          })
          .catch(() => {
            // console.log('e: ', e);
          });
      } else if (this.selectedRowKeys.length > 1) {
        this.$confirm(
          `该操作将删除 ${this.selectedRowKeys.length} 条数据，是否确认？`
        )
          .then(() => {
            this.postDelectModels();
          })
          .catch(() => {
            // console.log('e: ', e);
          });
      }
    },
    async getDelectModel() {
      let params = this.data[this.selectedRowKeys[0]].modelNumber;
      let res = await getDelModel(params);
      if (res.data.code === 0) {
        this.$message.success('删除成功');
        this.selectedRowKeys = [];
        this.loadModelList({
          current: 1,
          pageSize: 10,
        });
        this.pagination.current = 1;
        this.pagination.pageSize = 10;
      } else {
        this.$message.error('删除失败');
      }
    },
    async postDelectModels() {
      let params = [];
      this.selectedRowKeys.forEach(item => {
        params.push(this.data[item].modelNumber);
      });
      let res = await postDelModels(params);
      if (res.data.code === 0) {
        this.$message.success('删除成功');
        this.selectedRowKeys = [];
        this.loadModelList({
          current: 1,
          pageSize: 10,
        });
        this.pagination.current = 1;
        this.pagination.pageSize = 10;
      } else {
        this.$message.error('删除失败');
      }
    },
    start() {
      this.loading = true;
      // ajax request after empty completing
      setTimeout(() => {
        this.loading = false;
        this.selectedRowKeys = [];
      }, 1000);
    },
    onSelectChanges(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    onclose() {
      this.visible = false;
    },
  },
};
</script>

<style lang="less" scoped>
.modelConnect {
  width: 100%;
  height: 100%;
  &_input {
    width: 100%;
    height: 60px;
    border: 1px solid #e8e8e8;
  }
  &_table {
    width: 100%;
    overflow: auto;
    border: 1px solid #e8e8e8;
    position: absolute;
    top: 70px;
    bottom: 0;
    left: 0;
  }
}
/deep/ .poros-input {
  width: 72%;
}
// /deep/ .poros-table {
//   max-height: 300px;
// }
/deep/ .poros-table-thead > tr > th {
  height: 27px;
  line-height: 27px;
}
/deep/ .poros-table-tbody > tr > td {
  height: 27px;
  line-height: 27px;
}
/deep/ .poros-row-flex {
  margin-bottom: 15px;
}
/deep/ textarea.poros-input {
  max-width: 70vw;
}
/deep/ .poros-form-item-label {
  width: 90px !important;
}
/deep/ .poros-form-item-control {
  width: 140px;
}
.wmassageMask {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(246, 247, 249, 0.7);
  z-index: 101;
  .messageMaskContent {
    position: absolute;
    bottom: 20px;
    right: 50px;
    top: 50px;
    left: 220px;
    background-color: white;
    border: 1px solid rgba(215, 215, 215, 1);
    &-title {
      width: 100%;
      height: 35px;
      border-bottom: 1px dotted rgba(215, 215, 215, 1);
      line-height: 35px;
      span {
        font-size: 16px;
        font-weight: 700;
        color: #040181;
        margin-left: 12px;
      }
    }
  }
}
.messageMaskContent-connect {
  width: 100%;
  height: 90vh !important;
  overflow: auto;
}
.edit {
  position: absolute;
  top: 30px;
  right: 30px;
}
.modelConnect_foot {
  width: 100%;
  height: 40px;
  position: absolute;
  bottom: 0;
  // border-top: 1px dotted rgba(215, 215, 215, 1);
}
.from-input {
  width: 190% !important;
}
.foot-connect {
  display: flex;
  justify-content: center;
  height: 35px;
  width: 100%;
}
/deep/ .poros-drawer-body {
  padding-bottom: 0;
}
.model-div {
  height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background: #f5f5f5;
  color: rgba(0, 0, 0, 0.25);
  padding-left: 10px;
}
.form-container {
  box-sizing: border-box;
  background-color: #f7f7f8;
  padding: 10px;
  padding-bottom: 10px;
  width: 100%;
  margin-bottom: 0;
}
</style>
